<!DOCTYPE html>
<html>

	<head>
		<title></title>
		<script src="js/vue.js"></script>
		<link rel="stylesheet" href="./lib/bootstrap-icons/bootstrap-icons.css">
	
	</head>

	<body>

		<style>
			table{
				border: 1px solid ;
			}
			.gooddness th {
				background-color: #3d444c;
				border: 3px soild #1e1e1e;
				color: white;
			}
		</style>
		<fieldset id="">
			<legend>作业要求</legend>
			<ol>
				<li>根据现有数据goods,渲染至如下图的表格中</li>
				<li><b>只编写一个</b>事件处理函数handleSort(type)，来实现3列数据的排序</li>
				<li>type为id、price或者sales，分别对应第1、3、4列</li>
				<li>每次排序，<b>互相独立，互不影响</b>，根据排序类型，显示对应的箭头</li>
				<li>点击"#"、"价格"、"销量"3个表头，分别实现对应的排序，第一次点击升序，第二次降序</li>
				<li>点击"×"按钮，删除本条数据</li>
				<li>完成所有功能之后，以<b>自己名字</b>命名文件夹存放，提交PR(Pull Request)至码云仓库：<b>https://gitee.com/vux/week-test.git</b></li>
			</ol>
		</fieldset>

		<fieldset id="app">
			<legend>表格</legend>
			<table  cellpadding="7" class="gooddness">
				<thead align="center">
					<tr>
						<th v-on:click='handleSort(1)'  @click='isUp1=!isUp1' width='300px'>ID 
						<i :class="{'bi-caret-up-fill':isUp1}" ></i> 
						<i  :class="{'bi-caret-down-fill':!isUp1}" ></i> 
						</th>
						<!-- <i v-show></i> -->
						<th width='300px'> 商品</th>
						<th v-on:click='handleSort(2)'  @click='isUp2=!isUp2' width='300px'>价格
						<i  :class="{'bi bi-caret-up-fill':isUp2}" ></i>
						<i  :class="{'bi bi-caret-down-fill':!isUp2}" ></i> 
						</th>
						<th v-on:click='handleSort(3)' @click='isUp3=!isUp3' width='300px'>销量
						<i  :class="{'bi-caret-up-fill':isUp3}" ></i>
						<i  :class="{'bi-caret-down-fill':!isUp3}" ></i> 
						</th>
						<th width='300px'>操作</th>
					</tr>
				</thead>
				<tbody align="center">
					<tr v-for="(good,index) in goods" v-bind:key="good.id">
						<td>{{good.id}}</td>
						<td>{{good.name}}</td>
						<td>{{good.price}}</td>
						<td>{{good.sales}}</td>
						<td>
							<button @click='handleRemove(index)' type="button">x</button>
						</td>
					</tr>
				</tbody>
			</table>
		</fieldset>
		<script type="text/javascript">
			// 商品数据
			var app = new Vue({
				el: '#app',
				data: {
					isUp1:true,
					isUp2:true,
					isUp3:true,
					
					order:[1,1,1],
					
					goods: [{
						id: 1,
						name: "水杯",
						price: 10.0,
						sales: 800,
					}, {
						id: 2,
						name: "鼠标",
						price: 30.0,
						sales: 300,
					}, {
						id: 3,
						name: "纸巾",
						price: 20.5,
						sales: 1800,
					}, {
						id: 4,
						name: "数据线",
						price: 40.5,
						sales: 200,
					}, {
						id: 5,
						name: "键盘",
						price: 69.9,
						sales: 600,
					}, {
						id: 6,
						name: "儿童玩具",
						price: 50.0,
						sales: 400,
					}, {
						id: 7,
						name: "相框",
						price: 70.0,
						sales: 700,
					}, {
						id: 8,
						name: "外套",
						price: 80.0,
						sales: 500,
					}]
				},
				methods: {
					handleRemove: function(i) {
						this.goods.splice(i, 1)
					},

					handleSort: function(type) {
						if (type === 1) {
							var self = this;
							this.goods.sort(function(itemA, itemB) {
								return (itemB.id - itemA.id) * self.order[0];

							})
							this.order[0] = -this.order[0]
						}
						if (type === 2) {
							var self = this;
							this.goods.sort(function(itemA, itemB) {
								return (itemB.price - itemA.price) * self.order[1];
							})
							this.order[1] = -this.order[1]
						}
						if (type === 3) {
							var self = this;
							this.goods.sort(function(itemA, itemB) {
								return (itemB.sales - itemA.sales) * self.order[2];
							})
							this.order[2] = -this.order[2]
						}

					}


				}
			})
		</script>
	</body>

</html>
